<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
        <div id="app" class="demo">
            <img v-bind:src="imageSrc">
            <form v-on:submit.prevent="addNewTodo">
                <label for="new-todo">添加 todo</label>
                <input
                  v-model="newTodoText"
                  id="new-todo"
                  placeholder="例如：明天早上跑步"
                />
                <button>添加</button>
              </form>
              <ul>
                <todo-item
                  v-for="(todo, index) in todos"
                  :key="todo.id"
                  :title="todo.title"
                  @remove="todos.splice(index, 1)"
                ></todo-item>
              </ul>
  
        </div>




            
        
        
        


        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        // count:4
                        imageSrc:'https://static.runoob.com/images/code-icon-script.png',


                        newTodoText: '',
                        todos: [
                            {
                            id: 1,
                            title: '看电影'
                            },
                            {
                            id: 2,
                            title: '吃饭'
                            },
                            {
                            id: 3,
                            title: '上 RUNOOB 学习'
                            }
                        ],
                        nextTodoId: 4
                    }
                }
                ,
                methods:{
                    increment(){
                        // `this` 指向该组件实例
                        this.count++
                    },
                    addNewTodo() {
                        this.todos.push({
                            id: this.nextTodoId++,
                            title: this.newTodoText
                        })
                        this.newTodoText = ''
                    }
                }
            })

            app.component('todo-item', {
                template: `
                    <li>
                    {{ title }}
                    <button @click="$emit('remove')">删除</button>
                    </li>
                `,
                props: ['title'],
                emits: ['remove']
            })

            const vm = app.mount('#app')
            // app.mount('#todo-list-example')
            // document.write(vm.$data.count)
            // document.write("<br>")
            
            // vm.increment()
            // document.write(vm.count) // => 6
        </script>


    </body>
</html>